<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1" import="java.util.*"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>Admin Dashboard</title>
<!-- The styles -->
<link id="bs-css" href="admin/css/bootstrap-cerulean.min.css"
	rel="stylesheet">

<link href="admin/css/site-app.css" rel="stylesheet">
<link href='admin/css/jquery.noty.css' rel='stylesheet'>
<link href='admin/css/noty_theme_default.css' rel='stylesheet'>
<link href='admin/css/elfinder.min.css' rel='stylesheet'>
<link href='admin/css/elfinder.theme.css' rel='stylesheet'>
<link href='admin/css/jquery.iphone.toggle.css' rel='stylesheet'>
<link href='admin/css/uploadify.css' rel='stylesheet'>
<link href='admin/css/animate.min.css' rel='stylesheet'>

<!-- jQuery -->
<script src="js/jquery.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrapvalidator.min.js"></script>

<!-- The HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

<!-- The fav icon -->
<link rel="shortcut icon" href="img/favicon.ico">
<script type="text/javascript">
	function createRequest() {
		var r = null;
		if (window.ActiveXObject) {
			r = new ActiveXObject("Microsoft.XMLHTTP");
		} else {
			r = new XMLHttpRequest();
		}
		return r;
	}

	function sendRequest(url) {
		var data = "hello";
		r = createRequest();
		if (r == null)
			return;

		r.onreadystatechange = function() {
			if (r.readyState == 4) {
				if (r.status == 200) {
					data = r.responseText;
					updateResult(data);
				} else {
					updateResult(r.statusText);
				}
			}
		}
		r.open("GET", url, true);
		r.send(null);
	}
	function onCheckBoxChanged(checkbox) {
		var url = "http://localhost:8080/PropertyPoint/admin";
		var params = "";
		params += "id=" + checkbox.value;
		params += "&checked=" + checkbox.checked;

		url += "?" + params;
		//updateResult(url);
		sendRequest(url);
	}

	function updateResult(text) {
		var textBox1 = document.getElementById("result");
		textBox1.value = text;
	}
</script>
</head>

<body>
	<!-- topbar starts -->
	<div class="navbar navbar-default" role="navigation">

		<div class="navbar-inner">

			<!-- user dropdown starts -->
			<div class="btn-group pull-right animated tada">
				<button class="btn btn-default dropdown-toggle"
					data-toggle="dropdown">
					<i class="glyphicon glyphicon-user"></i><span
						class="hidden-sm hidden-xs"> admin</span> <span class="caret"></span>
				</button>
				<ul class="dropdown-menu">
					<li><a href="adminlogout">Logout</a></li>
				</ul>
			</div>
			<!-- user dropdown ends -->

			<ul class="collapse navbar-collapse nav navbar-nav top-menu">
				<li><a href="/PropertyPoint"><i class="glyphicon glyphicon-globe"></i>
						Visit Site</a></li>
			</ul>

		</div>
	</div>
	<!-- topbar ends -->
	<div class="ch-container">
		<div class="row">

			<!-- left menu starts -->
			<!--	<div class="col-sm-2 col-lg-2">
				<div class="sidebar-nav">
					<div class="nav-canvas">
						<div class="nav-sm nav nav-stacked"></div>
						<ul class="nav nav-pills nav-stacked main-menu">
							<li class="nav-header">Main</li>
							<li><a class="ajax-link" href="index.html"><i
									class="glyphicon glyphicon-home"></i><span> Dashboard</span></a></li>
							<li><a class="ajax-link" href="ui.html"><i
									class="glyphicon glyphicon-eye-open"></i><span> UI
										Features</span></a></li>
							<li><a class="ajax-link" href="form.html"><i
									class="glyphicon glyphicon-edit"></i><span> Forms</span></a></li>
							<li><a class="ajax-link" href="chart.html"><i
									class="glyphicon glyphicon-list-alt"></i><span> Charts</span></a></li>
							<li><a class="ajax-link" href="typography.html"><i
									class="glyphicon glyphicon-font"></i><span> Typography</span></a></li>
							<li><a class="ajax-link" href="gallery.html"><i
									class="glyphicon glyphicon-picture"></i><span> Gallery</span></a></li>

						</ul>
					</div>
				</div>
			</div> -->
			<!--/span-->
			<!-- left menu ends -->

			<div id="content" class="col-lg-10 col-sm-10">
				<!-- content starts -->
				<div>
					<ul class="breadcrumb">
						<li><a href="#">Home</a></li>
						<li><a href="#">Approve Advertisements</a></li>
					</ul>
				</div>

				<div class="row">
					<div class="box col-md-12">
						<div class="box-inner">
							<div class="box-header well" data-original-title="">
								<h2>
									<i class="glyphicon glyphicon-user"></i> Approve Advertisements
								</h2>

							</div>
							<div class="box-content">



								<form method="post" action="admin">
									<table border="1"
										class="table table-striped table-bordered bootstrap-datatable datatable responsive">
										<thead>
											<tr>
												<td>ID</td>
												<td>Status</td>
												<td>Publish Date</td>
												<td>End Date</td>
											</tr>
										</thead>
										<c:forEach items="${requestScope.mylist}" var="item">
											<tr>
												<td>${item.id}</td>
												<td class="center"><c:if
														test="${item.status == 'APPROVED'}">
														<input name="status" type="checkbox" value="${item.id}"
															onchange="onCheckBoxChanged(this);" checked />
													</c:if> <c:if test="${item.status == 'PENDING'}">
														<input name="status" type="checkbox" value="${item.id}"
															onchange="onCheckBoxChanged(this);" />
													</c:if></td>
												<td class="center">${item.publishedDate}</td>
												<td class="center">${item.endDate}</td>
											</tr>
										</c:forEach>
									</table>

									<br /> <input size="50" id="result" type="text" value=""
										readonly="readonly" /> <br />
									<!-- DONE: use AJAX to post checkbox change to AdminServlet -->

								</form>


							</div>
						</div>
					</div>
					<!--/span-->

				</div>
				<!--/row-->


				<!-- content ends -->
			</div>
			<!--/#content.col-md-0-->
		</div>
		<!--/fluid-row-->



		<hr>


		<footer class="row">
		<p class="col-md-9 col-sm-9 col-xs-12 copyright"
			style="text-align: center; width: 100%;">
			&copy; <a href="#" target="_blank">PropertyPoint</a> 2014
		</p>

		</footer>

	</div>
	<!--/.fluid-container-->

	<!-- external javascript -->
	<!-- notification plugin -->
	<script src="admin/js/jquery.noty.js"></script>
	<!-- library for making tables responsive -->
	<script
		src="admin/bower_components/responsive-tables/responsive-tables.js"></script>
	<!-- tour plugin -->
	<script
		src="admin/bower_components/bootstrap-tour/build/js/bootstrap-tour.min.js"></script>
	<!-- star rating plugin -->
	<script src="admin/js/jquery.raty.min.js"></script>
	<!-- for iOS style toggle switch -->
	<script src="admin/js/jquery.iphone.toggle.js"></script>
	<!-- autogrowing textarea plugin -->
	<script src="admin/js/jquery.autogrow-textarea.js"></script>
	<!-- multiple file upload plugin -->
	<script src="admin/js/jquery.uploadify-3.1.min.js"></script>
	<!-- history.js for cross-browser state change on ajax -->
	<script src="admin/js/jquery.history.js"></script>
	<!-- application script for Charisma demo -->
	<script src="admin/js/charisma.js"></script>


</body>
</html>
